/*
 * @Description:
 * @Author: Jevon
 * @Date: 2021-11-22 14:32:56
 */
import './style.css';
export default class DataMode {
  constructor() {
    this._selects = [];
  }

  resetData(data) {
    this.data = data;
    this._selects.forEach(s => {
      s.innerHTML = '';
      s.options.add(new Option('未选择'));
      data.forEach(op => {
        s.options.add(new Option(op.text, op.key));
      });
    });
  }

  createDiv(className) {
    const div = document.createElement('div');
    div.className = className;
    return div;
  }

  createSelect(text, options, parent) {
    const div = this.createDiv('data-mode-select-container');
    const label = this.createDiv('data-mode-select-text');
    label.innerText = text;
    const select = document.createElement('select');
    select.className = 'data-mode-select';
    select.options.add(new Option('未选择'));
    for (const key in options) {
      const op = options[key];
      select.options.add(new Option(op.text, op.key));
    }
    div.appendChild(label);
    div.appendChild(select);
    parent.appendChild(div);
    this._selects.push(select);
    return { select, label };
  }

  createBtn(onclick) {
    const btn = this.createDiv('data-mode-btn');
    btn.innerText = '变更';
    btn.onclick = onclick;
    return btn;
  }

  createRadio(id, text, parent) {
    const div = this.createDiv('data-mode-line');
    const input = document.createElement('input');
    input.id = id;
    input.className = 'data-mode-input';
    input.type = 'radio';
    input.name = 'data-mode';
    input.disabled = true;
    const label = document.createElement('label');
    label.className = 'data-mode-label';
    label.htmlFor = id;
    label.innerText = text;
    div.appendChild(input);
    div.appendChild(label);
    parent.appendChild(div);
    return { input, label };
  }

  createTitle(id, text, parent) {
    const div = this.createDiv('data-mode-title');
    div.id = id;
    div.innerText = text;
    parent.appendChild(div);
  }

  appendTo(parent) {
    if (parent instanceof HTMLElement) {
      parent.appendChild(this.container);
    }
  }
}
